// src/APP.vue

<template>
<div id="list-rendering">
  <ol>
    <todo-item
      v-for="item in groceryList"
      :todo="item"
      :key="item.id"
    ></todo-item>
  </ol>
</div>
</template>

<script lang="ts">
import { defineComponent, reactive } from 'vue'

export default defineComponent({
  name: 'APP',
  setup() {
    const groceryList = reactive([
      { id: 0, text: 'Vegetables' },
      { id: 1, text: 'Cheese' },
      { id: 2, text: 'Whatever else humans are supposed to eat' }
    ])

    return {
      groceryList
    }

  }
})
</script>